<template>
    <!--个人中心-->
    <div style="background-color: #E8E8E8">
        <hr style="color: #80c58a">
        <div class="pcContent">
            <div class="pc1">
                <h2 style="text-align: center;font-family: 'Droid Sans Mono';margin-top: 5px;">最近浏览</h2>
                <!--商品-->
                <div align="center" style="margin-top: 10px"  v-for="(item,index) in
                        recentlyProducts" :key="index">
                    <div >
                        <a target="_blank" :href="'/#/detail/'+item.id" >
                            <img class="self-img" :src="item.pic">
                            <h3 class="name ellipsis" style="color: #424242;text-align: center">{{item.name}}</h3>
                        </a>
                    </div>
                </div>
            </div>
            <div class="pc2">
                <div class="pc3">
                    <!--用户信息-->
                    <div class="pc31">
                        <img class="pcimg" :src="user.icon">
                        <div class="info">
                            <h1 v-if="user.username">{{user.username}}</h1>
                            <span><a @click="updateInfo" style="color: #7ECF68;font-size: 15px">修改个人信息></a></span>
                        </div>
                    </div>

                    <div class="pc32">
                        <div style="margin-left: 20px;margin-top: 65px;">
                            <table>
                                <tr>
                                    <td class="fontStyle">用户名：</td>
                                    <td class="fontStyle">{{user.username}}</td>
                                </tr>
                                <tr>
                                    <td class="fontStyle">昵称：</td>
                                    <td class="fontStyle">{{user.nickname}}</td>
                                </tr>
                                <tr>
                                    <td class="fontStyle">账号状态：</td>
                                    <td class="fontStyle" style="color:#80c58a;font-weight: bold">{{user.status==1?
                                        '正常':'禁用'}}</td>
                                </tr>
                                <tr >
                                    <td class="fontStyle" v-if="user.phone">手机号：</td>
                                    <td class="fontStyle">{{user.phone}}</td>
                                </tr>
                                <tr>
                                    <td class="fontStyle">注册时间：</td>
                                    <td class="fontStyle">{{user.createTime| formatCreateTime}}</td>
                                </tr>
                                <tr>
                                    <td class="fontStyle" v-if="user.integration">积分：</td>
                                    <td class="fontStyle">{{user.integration}}</td>
                                </tr>
                                <tr>
                                    <td class="fontStyle" v-if="user.city">所在城市：</td>
                                    <td class="fontStyle">{{user.city}}</td>
                                </tr>

                            </table>
                        </div>
                    </div>
                </div>
                <!--订单信息-->
                <div class="pc4">
                    <!--待付款订单-->
                    <div class="waitPay">
                        <img class="pcimg" src="https://gjy-mall.oss-cn-shenzhen.aliyuncs.com/gjy-mall/images/20210928/waitPay.png" alt="null"/>
                        <div class="info2">
                            <span style="margin-top: 20px;color: #424242;font-size:20px">待支付订单: {{waitPayNum}}</span>
                            <br>
                            <span><a  @click="waitPayOpt" style="color: #7ECF68;font-size: 15px">查看待支付订单></a></span>
                        </div>
                    </div>
                    <!--待收货订单-->
                    <div class="waitReceive">
                        <img class="pcimg" src="https://gjy-mall.oss-cn-shenzhen.aliyuncs.com/gjy-mall/images/20210928/waitReceive.png"/>
                        <div class="info2">
                            <span style="color: #424242;font-size: 20px">待收货订单: {{waitReceiveNum}}</span>
                            <br>
                            <span><a @click="waitReceiveOpt" style="color: #7ECF68;font-size: 15px">查看待收货订单></a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--修改个人信息弹出框-->
        <el-dialog
                title="修改个人信息"
                :visible.sync="diaLogVisible"
                width="50%"
                center>
            <!--表单-->
            <el-card shadow="never" >
                <el-form label-width="140px" size="small">
                    <el-form-item label="头像：" prop="username">
                        <!--引入自定义图片上传组件-->
                        <img class="pcimg2" :src="user.icon">
                    </el-form-item>
                    <el-form-item label="用户名：" prop="username">
                        <el-input v-model="user.username" class="input-width" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="昵称：" prop="nickname">
                        <el-input v-model="updateUser.nickname" class="input-width"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：" prop="phone">
                        <el-input v-model="updateUser.phone" class="input-width"></el-input>
                    </el-form-item>
                    <el-form-item label="原始密码" prop="password">
                        <el-input type="password" v-model="updateUser.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input type="password" v-model="newPassword" autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPassword">
                        <el-input type="password" v-model="checkPassword" autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="diaLogVisible = false">取 消</el-button>
                        <el-button type="success"  @click="comfirmUpdate">确 定</el-button>
                    </el-form-item>
                </el-form >
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
    import {formatDate} from '@/util/date';
    import {mapState} from 'vuex'
    import Qs from "qs";
    export default {
        name: "PersonalCenter",
        data(){
            return{
                recentlyProducts:[],
                diaLogVisible:false,
                user:{
                    id:"",
                    username: "",
                    password: "",
                    nickname: "",
                    phone: "",
                    status: 1,
                    createTime: "",
                    icon: "",
                    gender: "",
                    birthday: null,
                    city: "",
                    job: "",
                    integration: 0
                },
                updateUser:{
                    id:"",
                    username: "",
                    password: "",
                    nickname: "",
                    phone: "",
                    status: 1,
                    createTime: "",
                    icon: "",
                    gender: "",
                    birthday: null,
                    city: "",
                    job: "",
                    integration: 0
                },
                waitPayNum:0,
                waitReceiveNum:0,
                newPassword:'',
                checkPassword:'',
            }
        },
        filters:{
            formatCreateTime(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            },
        },
        computed:{
        },
        mounted() {
            this.init();
            this.user.username=this.$store.state.username;
        },
        methods:{
            //确认提交修改
            comfirmUpdate(){
                /*if(this.newPassword!==null&&this.newPassword<=3){
                    this.$message.error('密码不能小于3位！');
                }else */
                if(this.newPassword!=''){
                    //填写了密码
                    //判断两次密码输入是否相同
                    //填写新密码后又删除掉了，newPassword由原来的null变为了string类型的''
                    if(this.newPassword===this.checkPassword){
                        var data = new FormData();
                        data.append('umsMember',JSON.stringify(this.updateUser))
                        data.append('newPassword',this.newPassword)
                        this.axios.post('/user/update',data).then(response=>{
                            if(response){
                                this.$message.success('更新成功！');
                                this.newPassword=null;
                                this.checkPassword=null;
                                this.diaLogVisible=false;
                                //重新获取用户信息
                                this.init();
                            }else if(response.code==500){
                                this.$message.success('新密码与原密码一致，请重新输入！');
                                this.newPassword=null;
                                this.checkPassword=null;
                            }else{
                                //修改密码的情况下，如果原始密码输入错误，则无法修改成功
                                this.$message.error("您没有作出修改、保持原有信息！")
                            }
                        })
                    }else{
                        this.$message.error("两次密码输入不一致，请重新确认密码！")
                        this.newPassword=null;
                        this.checkPassword=null;
                    }
                }else{
                    //没有填写新密码
                    let data2 = new FormData();
                    data2.append('umsMember',JSON.stringify(this.updateUser))
                    data2.append('newPassword','')
                    this.axios.post('/user/update',data2).then(response=>{
                        if(response){
                            this.$message.success('更新成功！');
                            this.newPassword=null;
                            this.checkPassword=null;
                            this.diaLogVisible=false;
                            //重新获取用户信息
                            this.init();
                        }else {
                            this.newPassword=null;
                            this.checkPassword=null;
                            this.$message.error("您没有作出修改、保持原有信息！")
                        }
                    })
                }
            },
            //修改个人信息
            updateInfo(){
                this.diaLogVisible=true;
                //深拷贝、浅拷贝
                this.updateUser.id=this.user.id;
                this.updateUser.icon=this.user.icon;
                this.updateUser.username=this.user.username;
                this.updateUser.username=this.user.username;
                this.updateUser.password=this.user.password;
                this.updateUser.nickname=this.user.nickname;
                this.updateUser.phone=this.user.phone;
                this.updateUser.createTime=this.user.createTime;
                this.updateUser.city=this.user.city;
                this.updateUser.integration=this.user.integration;
            },
            //初始化页面信息
            init(){
                this.axios.get('/user/info').then(response=>{
                    this.user=response;
                })
                this.getOrderNumber(0);
                this.getOrderNumber(2);
                this.getLastlyProduct();
            },
            waitPayOpt(){
                //this.$router.push({name:'/order/list',query:{status: 0}})
                this.$router.push('/order/list')
            },
            waitReceiveOpt(){
                //his.$router.push('/order/list',{query:{status: 2}})
            },
            getOrderNumber(status){
                this.axios.post('/order/list/userOrder',Qs.stringify({
                    pageSize:5,
                    pageNum:this.pageNum,
                    status: status
                }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then((res)=>{
                    if(status===0){
                        this.waitPayNum=res.total;
                    }else{
                        this.waitReceiveNum=res.total;
                    }

                })
            },
            //获取最近浏览的商品
            getLastlyProduct(){
                this.axios.get('/user/recentlyViewedItems').then(response=>{
                    this.recentlyProducts=response;
                })
            }
        }

    }
</script>

<style scoped>
    .self-img {
        width: 150px;
        height: 166px;
        margin: 12px auto 18px;
        border-radius: 5px;
    }

    /**/
    /**/

    .fontStyle{
        font-size: 15px;
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
    }

    .pcContent{
        border-radius: 5px;
        position: relative;
        width: 1226px;
        height: auto;
        margin: 0 auto;
        display: flex;
        margin-top: 10px;
    }
    .pc1{
        border-radius: 5px;
        width: 320px;
        height: 500px;
        background-color: whitesmoke;
        margin-bottom: 10px;
    }
    .pc2{
        width: 100%;
        height: 500px;
        border-radius: 5px;
        margin-left: 10px;

    }
    .pc3{
        border-radius: 5px;
        width: 100%;
        height: 245px;
        background-color: whitesmoke;
        position: relative;
        display: flex;

    }

    .pc4{
        border-radius: 5px;
        width: 100%;
        height: 245px;
        background-color: whitesmoke;
        margin-top: 10px;
        position: relative;
        display: flex;
    }

    .pc31{
        border-radius: 5px;
        width: 485px;
        height: 100%;
        background-color: whitesmoke;
        display: flex;
        position: relative;
    }

    .pc32{
        border-radius: 5px;
        width: 485px;
        height: 100%;
        background-color: whitesmoke;
    }

    .pcimg{
        border-radius: 100px;
        width: 125px;
        height: 125px;
        margin-left: 30px;
        margin-top: 55px;
        border-color: #80c58a;
    }

    .pcimg2{
        border-radius: 100px;
        width: 125px;
        height: 125px;
        margin-left: 30px;
        border-color: #80c58a;
    }

    .info{
        margin-left: 20px;
        margin-top: 100px;
    }

    .info2{
        margin-left: 10px;
        margin-top: 110px;
    }

    .waitReceive{
        width: 485px;
        height: 100%;
        display: flex;
        position: relative;
    }

    .waitPay{
        width: 485px;
        height: 100%;
        display: flex;
        position: relative;

    }

</style>